<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>PDF转图片|PDF转JPG - 在线工具 - OKTools</title>
    <meta name="keywords" content="PDF转图片、PDF转JPG">
    <meta name="description" content="在线PDF转JPG工具,使用pdf.js将PDF转为JPG图片">
    <link rel="shortcut icon" href="/favicon.ico">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<body>
{{template "aside"}}
<main>
    <div class="container">
        <h1>PDF转图片</h1>
        <div class="file fullwidth mt-2">
            <span class="file-cta">
                <input id="input_file" class="file-input" type="file" accept="application/pdf"
                       onchange="loadPDF(this.files[0])">
                <span class="file-icon">
                    <i class="fas fa-upload"></i>
                </span>
                <span class="file-button">选择一个PDF文件</span>
            </span>
            <span id="file_name" class="file-name"></span>
        </div>
        <div class="content-center mt-2">
            <div class="group">
                <button class="button" onclick="prevPage()">
                    <i class="fa fa-arrow-left"></i>
                    <span>上一页</span>
                </button>
                <button class="button" onclick="nextPage()">
                    <span>下一页</span>
                    <i class="fa fa-arrow-right"></i>
                </button>
            </div>
            <div id="out_type" class="group">
                <button class="button primary">
                    <span>JPG</span>
                </button>
                <button class="button">
                    <span>PNG</span>
                </button>
            </div>
            <button class="button primary" onclick="save()">
                <span>保存本页</span>
            </button>
            <button class="button primary" onclick="saveAll()">
                <span>全部保存</span>
            </button>
        </div>
        <p id="page_num"></p>
        <div class="content-center mt-2">
            <canvas id="preview" class="bordered" hidden></canvas>
        </div>
    </div>
</main>
<script src="https://cdn.bootcss.com/pdf.js/2.2.228/pdf.min.js"></script>
<script>
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js';

    const preview = document.getElementById('preview');
    const page_num = document.getElementById('page_num');
    const out_type = document.getElementById('out_type');

    let pdfFile, pdf, pageNum, context = preview.getContext('2d');

    out_type.querySelectorAll('.button').forEach(function (btn) {
        btn.onclick = function () {
            out_type.querySelector('.primary').classList.remove('primary');
            btn.classList.add('primary');
        }
    });

    function loadPDF(file) {
        pdfFile = file;
        file_name.innerHTML = file.name;

        let reader = new FileReader();
        reader.onload = (e) => showPDF(e.target.result);
        reader.readAsDataURL(file);
    }

    function showPDF(url) {
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function (doc) {
            pdf = doc;
            pageNum = 1;
            preview.hidden = false;
            readerPage()
        }, function (reason) {
            alert(reason)
        });
    }

    function prevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        readerPage()
    }

    function nextPage() {
        if (pageNum >= pdf.numPages) {
            return;
        }
        pageNum++;
        readerPage()
    }

    function readerPage(callback) {
        pdf.getPage(pageNum).then(function (page) {
            let scale = 1.5;
            let viewport = page.getViewport({scale: scale});

            preview.height = viewport.height;
            preview.width = viewport.width;

            let renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext).promise.then(callback);
        });
        page_num.innerText = `页码 : ${pageNum} / ${pdf.numPages}`;
    }

    function save() {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        let type = out_type.querySelector('.primary').innerText.toLowerCase();
        a.download = pdfFile.name + '-' + pageNum + '.' + type;
        a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');
        a.dispatchEvent(event)
    }

    function saveAll() {
        pageNum = 1;
        savePage()
    }

    function savePage() {
        if (pageNum > pdf.numPages) {
            alert('全部保存成功');
            return
        }

        readerPage(function () {
            save();
            pageNum++;
            savePage();
        });
    }
</script>
</body>
</html>